<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Names List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #displayForm, #removeForm {
            margin-bottom: 20px;
        }
        ol {
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <h1>Manage Names List</h1>

    <!-- Form to specify the starting name and number of names -->
    <form id="displayForm">
        <label for="startName">Starting Name:</label>
        <input type="text" id="startName" name="startName" required>
        <br>
        <label for="numNames">Number of Names to Display:</label>
        <input type="number" id="numNames" name="numNames" min="1" required>
        <br>
        <button type="submit">Display Names in New Window</button>
    </form>

    <!-- Form to input a name to remove -->
    <form id="removeForm">
        <label for="removeName">Name to Remove:</label>
        <input type="text" id="removeName" name="removeName" required>
        <button type="submit">Remove Name</button>
    </form>

    <!-- Display the list of names with numbers -->
    <h2>Current List of Names</h2>
    <ol id="nameList">
        <!-- Names will be populated here by JavaScript -->
    </ol>

    <script>
        const displayForm = document.getElementById('displayForm');
        const removeForm = document.getElementById('removeForm');
        const nameList = document.getElementById('nameList');

        // Predefined list of names
        let predefinedNames = [
            "Alice", "Bob", "Charlie", "David", "Eve",
            "Frank", "Grace", "Hannah", "Ivy", "Jack",
            "Karen", "Leo", "Mona", "Nina", "Oscar"
        ];

        // Function to render the list of names with numbers on the main page
        function renderNameList() {
            nameList.innerHTML = ''; // Clear existing list
            predefinedNames.forEach((name, index) => {
                const listItem = document.createElement('li');
                listItem.textContent = `${index + 1}. ${name}`;
                nameList.appendChild(listItem);
            });
        }

        // Function to open a new window with a list of names starting from a specified name
        function openNamesWindow(startName, count) {
            const newWindow = window.open('', '', 'width=600,height=400');
            newWindow.document.write('<!DOCTYPE html>');
            newWindow.document.write('<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Names List</title></head><body>');
            newWindow.document.write('<h1>Names List</h1><ol>');

            const startIndex = predefinedNames.indexOf(startName);
            if (startIndex === -1) {
                newWindow.document.write('<p>Starting name not found in the list.</p>');
            } else {
                const endIndex = Math.min(startIndex + count, predefinedNames.length);
                for (let i = startIndex; i < endIndex; i++) {
                    newWindow.document.write(`<li>${i + 1}. ${predefinedNames[i]}</li>`);
                }
            }

            newWindow.document.write('</ol>');
            newWindow.document.write('<form id="removeForm"><label for="removeName">Name to Remove:</label><input type="text" id="removeName" name="removeName" required><button type="submit">Remove Name</button></form>');
            newWindow.document.write('<script>document.getElementById("removeForm").addEventListener("submit", function(event) { event.preventDefault(); var nameToRemove = document.getElementById("removeName").value.trim(); var items = document.querySelectorAll("ol li"); var found = false; items.forEach(item => { if (item.textContent.includes(nameToRemove)) { item.remove(); found = true; } }); if (!found) { alert("Name not found in the list."); } document.getElementById("removeName").value = ""; });<\/script>');
            newWindow.document.write('</body></html>');
            newWindow.document.close();
            return newWindow;
        }

        // Function to remove all occurrences of a specified name from the predefined list
        function removeName(nameToRemove) {
            predefinedNames = predefinedNames.filter(name => name !== nameToRemove);
            renderNameList(); // Update the displayed list on the main page
        }

        // Handle display form submission
        displayForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission
            
            const startName = document.getElementById('startName').value.trim();
            const numNames = parseInt(document.getElementById('numNames').value, 10);
            
            if (numNames <= 0) {
                alert('Please enter a valid number greater than 0.');
                return;
            }

            openNamesWindow(startName, numNames); // Open a new window with names
        });

        // Handle remove name form submission
        removeForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission
            
            const removeNameInput = document.getElementById('removeName');
            const nameToRemove = removeNameInput.value.trim();
            
            if (nameToRemove === '') return; // Don't proceed if the input is empty
            
            removeName(nameToRemove); // Remove name from predefined list

            // Notify user of successful removal
            alert(`Name "${nameToRemove}" removed from the list.`);

            removeNameInput.value = ''; // Clear the input field
        });

        // Initial rendering of the name list
        renderNameList();

    </script>
</body>
</html>
